<script setup lang="ts">
import { ref, watch } from 'vue';
import { getArticlesAPI } from '../api/article';
import { useChannelStore } from '../store/channel';
import { ArticleItem } from '../types/data';

// const props = defineProps<{ channelId: number }>();

// 5. 调用useXxxStore获取store
const store = useChannelStore();
// 6. 通过store.xxx获取数据和方法
const articles = ref<ArticleItem[]>([]);

const loadData = async () => {
  const res = await getArticlesAPI(store.channelId);
  articles.value = res.data.results;
};

watch(
  () => store.channelId,
  () => {
    loadData();
  },
  { immediate: true }
);
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in articles" :key="item.art_id">
      <p class="title">{{ item.title }}</p>
      <img
        v-for="url in item.cover.images"
        :key="url"
        v-if="item.cover.type !== 0"
        class="img"
        :src="url"
        alt=""
      />

      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}天前</span>
      </div>
    </div>
  </div>
</template>
